import { merge } from '@/utils/core'
import { ElLoading } from 'element-plus'

export interface IUseElLoading {
    service: (target?: string | HTMLElement, text?: string, options?: IUseElLoadingOptions) => any
}
export interface IUseElLoadingOptions {
    target?: string | HTMLElement,
    body?: boolean,
    fullscreen?: boolean,
    lock?: boolean,
    text?: string,
    spinner?: string,
    background?: string,
    customClass?: string
}

export const useElLoading = (): IUseElLoading => {
    const defaultOptions: IUseElLoadingOptions = {
        target: document.body,
        text: 'Loading...',
        background: '#80808080',
        customClass: 'h-loading'
    }
    return {
        service: (target, text, options: IUseElLoadingOptions = {}) => {
            target && (defaultOptions.target = target);
            text && (defaultOptions.text = text);
            return ElLoading.service(merge(defaultOptions, options))
        },
    }

}